<template>
  <view class="fu-city-picker">
    <!-- 搜索框 -->
    <view class="fu-city-picker__search">
      <fu-search
        v-model="searchText"
        placeholder="请输入城市名称或拼音"
        @change="onSearch"
      />
    </view>
    
    <!-- 搜索结果 -->
    <scroll-view 
      v-if="searchText"
      class="fu-city-picker__search-result"
      scroll-y
    >
      <view 
        v-for="item in searchResults" 
        :key="item.code"
        class="fu-city-picker__item"
        @tap="onCitySelect(item)"
      >
        <text class="fu-city-picker__name">{{ item.name }}</text>
      </view>
      
      <view v-if="!searchResults.length" class="fu-city-picker__empty">
        <text>未找到相关城市</text>
      </view>
    </scroll-view>
    
    <!-- 城市列表 -->
    <template v-else>
      <!-- 当前定位 -->
      <view v-if="showLocation" class="fu-city-picker__section">
        <view class="fu-city-picker__title">当前定位</view>
        <view class="fu-city-picker__grid">
          <view 
            class="fu-city-picker__item"
            @tap="onCitySelect(locationCity)"
          >
            <text class="fu-city-picker__name">{{ locationCity.name }}</text>
          </view>
        </view>
      </view>
      
      <!-- 热门城市 -->
      <view v-if="hotCities.length" class="fu-city-picker__section">
        <view class="fu-city-picker__title">热门城市</view>
        <view class="fu-city-picker__grid">
          <view 
            v-for="item in hotCities" 
            :key="item.code"
            class="fu-city-picker__item"
            @tap="onCitySelect(item)"
          >
            <text class="fu-city-picker__name">{{ item.name }}</text>
          </view>
        </view>
      </view>
      
      <!-- 城市列表 -->
      <fu-index-list
        :list="cityList"
        :sticky="true"
        @select="onCitySelect"
      />
    </template>
  </view>
</template>

<script>
/**
 * @description 城市选择组件
 * @property {Array} cityList 城市列表数据
 * @property {Array} hotCities 热门城市数据
 * @property {Object} locationCity 当前定位城市
 * @property {Boolean} showLocation 是否显示定位城市
 * @event {Function} select 选择城市时触发
 */
export default {
  name: 'FuCityPicker',
  
  props: {
    // 城市列表数据
    cityList: {
      type: Array,
      default: () => []
    },
    // 热门城市数据
    hotCities: {
      type: Array,
      default: () => []
    },
    // 当前定位城市
    locationCity: {
      type: Object,
      default: () => ({})
    },
    // 是否显示定位城市
    showLocation: {
      type: Boolean,
      default: true
    }
  },
  
  data() {
    return {
      searchText: '',
      searchResults: []
    }
  },
  
  methods: {
    // 搜索处理
    onSearch(value) {
      this.searchText = value
      if (!value) {
        this.searchResults = []
        return
      }
      
      // 搜索城市名称和拼音
      const searchText = value.toLowerCase()
      const results = []
      
      this.cityList.forEach(group => {
        group.items.forEach(item => {
          const name = item.name.toLowerCase()
          const pinyin = (item.pinyin || '').toLowerCase()
          const py = (item.py || '').toLowerCase()
          
          if (name.includes(searchText) || pinyin.includes(searchText) || py.includes(searchText)) {
            results.push(item)
          }
        })
      })
      
      this.searchResults = results
    },
    
    // 选择城市
    onCitySelect(city) {
      this.$emit('select', city)
    }
  }
}
</script>

<style lang="scss">
.fu-city-picker {
  height: 100%;
  background-color: #f8f8f8;
  padding-top: 92rpx;
  
  &__search {
    padding: 20rpx;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    /* #ifdef H5 */
    top: var(--window-top);
    /* #endif */
    
    ::v-deep .fu-search {
      background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 0 20rpx;
      height: 72rpx;
      
      &__input {
        font-size: 28rpx;
      }
      
      &__icon {
        color: #999;
      }
    }
  }
  
  &__search-result {
    height: 100%;
    background-color: #fff;
    padding: 0 20rpx;
    /* #ifdef H5 */
    padding-top: calc(112rpx + var(--window-top));
    /* #endif */
    /* #ifndef H5 */
    padding-top: 112rpx;
    /* #endif */
  }
  
  &__section {
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    /* #ifdef H5 */
    &:first-child {
      margin-top: calc(112rpx + var(--window-top));
    }
    /* #endif */
    /* #ifndef H5 */
    &:first-child {
      margin-top: 112rpx;
    }
    /* #endif */
  }
  
  &__title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }
  
  &__grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10rpx;
  }
  
  &__item {
    width: 33.33%;
    padding: 10rpx;
    box-sizing: border-box;
    
    &-inner {
      height: 72rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
      border-radius: 8rpx;
    }
  }
  
  &__name {
    font-size: 28rpx;
    color: #333;
    padding: 20rpx 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    
    &:active {
      opacity: 0.7;
    }
  }
  
  &__empty {
    padding: 100rpx 0;
    text-align: center;
    color: #999;
    font-size: 28rpx;
  }
}
</style> 